<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
                <el-form-item label="用户：">
                  <UserSearchable v-model="from.userId"></UserSearchable>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" type="primary" icon="el-icon-circle-plus-outline" @click="add()">新增</el-button>
          <el-button class="mr10" size="small" type="danger" icon="el-icon-delete"  @click="allDel()">删除</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        @selection-change="onSelectTab" highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" min-width="80" />
        <el-table-column prop="userId" label="用户UID" min-width="80" />
        <el-table-column prop="nickname" label="用户昵称" min-width="80" />
        <el-table-column prop="phone" label="用户电话" min-width="120" />
        <el-table-column prop="remark" label="备注" min-width="100" />
        <el-table-column prop="createBy" label="创建者" min-width="100" />
        <el-table-column prop="createTime" label="时间" min-width="150" />
        <el-table-column label="操作" min-width="200" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <!--用户列表-->
    <el-dialog title="用户列表" :visible.sync="userVisible" width="900px"  :close-on-click-modal="false"
      :close-on-press-escape="false">
      <user-list v-if="userVisible" @getTemplateRow="getTemplateRow"></user-list>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userclose()">取 消</el-button>
        <el-button type="primary" @click="usersubmit()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增" :visible.sync="dialogVisible" width="600px"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="180px">
        <el-form-item label="用户" prop="userId">
          <UserSearchable v-model="ruleForm.userId"></UserSearchable>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import userList from '@/components/userList'
import UserSearchable from "@/components/UserSearchable";
import {
  userListApi,
  userblacklistList,
  userblacklistSave,
  userblacklistDelete
} from '@/api/user'
export default {
  name: 'trader',
  components: {
    userList,
    UserSearchable
  },
  data() {
    return {
      labelPosition: 'right',
      userVisible: false,
      from: {
        userId: '',
        page: 1,
        limit: 15,
      },
      loading: false,
      tableData: {
        data: [],
        total: 0
      },
      selection: [],
      dialogVisible: false,
      ruleForm: {
        userId: '',
        remark: '',
      },
      rules: {
        userId: [{
          required: true,
          message: '请选择用户',
          trigger: 'change'
        }],
      }
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    selectUser() {
      this.userVisible = true
    },
    getTemplateRow(row) {
      this.ruleForm.userId = row.uid
      this.from.userId = row.uid
    },
    userclose() {
      this.ruleForm.userId = ''
      this.from.userId = ''
      this.userVisible = false
    },
    usersubmit() {
      this.userVisible = false
    },
    search() {
      this.from.page = 1
      this.from.limit = 15
      this.getlist()
    },
    reset() {
      this.from = {
        userId: '',
        page: 1,
        limit: 15,
      }
      this.getlist()
    },
    getlist() {
      this.loading = true
      userblacklistList(this.from).then(res => {
        this.tableData.data = res.list
        this.tableData.total = res.total
        this.loading = false
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    add() {
      this.ruleForm = {
        userId: '',
        remark: '',
      }
      this.dialogVisible = true
    },
    close() {
      this.ruleForm = {
        userId: '',
        remark: '',
      }
      this.from.userId = ''
      this.dialogVisible = false
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('新增', this.ruleForm)
          userblacklistSave(this.ruleForm).then(res => {
            console.log(res)
            this.close()
            this.$message.success('新增成功')
            this.getlist()
          }).catch(err => {
            console.log(err)
            this.$message.error(err)
          })
        } else {
          this.$message.error('请填写完整信息')
        }
      });
    },
    // 选择
    onSelectTab(selection) {
      this.selection = []
      selection.forEach(item => {
        this.selection.push(item.id)
      })
      console.log(this.selection)
    },
    allDel() {
      if (this.selection.length == 0) {
        return this.$message.error('至少选择一项')
      }
      console.log(this.selection)
      this.$confirm('确认删除？')
        .then(_ => {
          userblacklistDelete(this.selection).then(res => {
            console.log(res)
            this.$message.success('删除成功')
            this.getlist()
          }).catch(err => {
            console.log(err)
            this.$message.error(err)
          })
        })
        .catch(_ => { });
    },
    handleDel(row) {
      this.$confirm('确认删除？')
        .then(_ => {
          console.log('删除', row)
          userblacklistDelete([row.id]).then(res => {
            console.log(res)
            this.$message.success('删除成功')
            this.getlist()
          }).catch(err => {
            console.log(err)
            this.$message.error(err)
          })
        })
        .catch(_ => { });
    },
    pageChange(page) {
      this.from.page = page
      this.getlist()
    },
    handleSizeChange(val) {
      this.from.limit = val
      this.getlist()
    }
  }
}
</script>

<style scoped lang="scss">
.btn_bt {
  border-top: 1px dashed #ccc;
  padding-top: 20px;
}
</style>
